<template>
    <div class="list"  @touchstart="touchstart" @touchend="touchend">
        <div class="title" v-if="title">
            <span class="l">{{title}}</span>
            <span class="r" @click="$router.push('/search')">显示全部<i class="iconfont icon-you"></i></span>
        </div>
        <ul>
            <li v-for="(item,index) in list||[]" :key="index">
                <item :item="item"></item>
            </li>
        </ul>
        <div class="nodata" v-if="(list||[]).length==0 && !loading">{{nodataText||'暂无课程'}}</div>
    </div>
</template>
<style lang="less" scoped>
.list {
    padding: 30 / 2px 30 / 2px 100/2px;
    min-height: 90vh;
    .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30/2px;
        .l {
            border-left: 4 / 2px solid #ffffff40;
            padding-left: 20/2px;
        }
        .r {
            font-size: 24 / 2px;
            .iconfont {
                color: #ffffff40;
                font-size: 24/2px;
                margin-left: 10/2px;
            }
        }
    }
    .nodata {
        color: #ffffff80;
        text-align: center;
        font-size: 24 / 2px;
    }
}
</style>
<script>
import item from '@/components/list/item'
export default {
    props: {
        title: String,
        nodataText: String,
        list: Array,
        loading: Boolean,
        noback: Boolean
    },
    components: {
        item
    },
    data () {
        return {
        }
    },
    mounted () {
        if (!this.title) {
            this.$nextTick(() => {
                let _this = this
                document.body.addEventListener("scroll", () => { //文档内容实际高度（包括超出视窗的溢出部分）
                    var scrollHeight = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);
                    //滚动条滚动距离
                    var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
                    //窗口可视范围高度
                    var clientHeight = window.innerHeight || Math.min(document.documentElement.clientHeight, document.body.clientHeight);
                    if (clientHeight + scrollTop >= scrollHeight) {
                        _this.$emit('touchEnd')
                    }
                });
            })
        }
    },
    methods:{
        touchstart (e) {
            this.pageX = e.changedTouches[0].pageX
        },
        touchend (e) {
            let pageX = e.changedTouches[0].pageX
            let distance = pageX - this.pageX
            if (distance > 100) {
                this.noback || this.$router.back()
            }
        },
    }
};
</script>